import { useEffect } from 'react'
import { Outlet } from 'react-router-dom'
import { useMeta, useMailTypeOptions, useMailTemplates, useCookies } from '@/stores'
import SideBar from '@/components/SideBar'
import { Conf as Store } from 'electron-conf/renderer'
import { RiBowlLine, RiSettings3Line, RiFileUnknowLine, RiInformation2Line } from 'react-icons/ri'

import './index.less'

import type { MailTopTypeOptionType, MailSecondTypeOptionType, MailTemplateType } from '@/types/stores.type'

const MainPage = () => {

  const { meta } = useMeta()
  const { setMailTopTypeOptions, setMailSecondTypeOptions } = useMailTypeOptions()
  const { setMailTemplates } = useMailTemplates()
  const { setJSYCookie } = useCookies()

  const electronStore = new Store()

  const menuList: SideBarMenuListType = [
    {
      title: '工作台',
      icon: <RiBowlLine className='c-icon' />,
      value: 'home',
      isTailNode: true,
    },
    {
      title: '设置',
      icon: <RiSettings3Line className='c-icon' />,
      value: 'settings',
      isTailNode: true,
    },
    {
      title: '日志',
      icon: <RiFileUnknowLine className='c-icon' />,
      value: 'log',
      isTailNode: true,
    },
    {
      title: '关于',
      icon: <RiInformation2Line className='c-icon' />,
      value: 'about',
      isTailNode: true,
    },
  ]

  useEffect(() => {
    document.title = meta.title
  }, [meta])

  useEffect(() => {
    electronStore.get('mailTopTypeOptions').then((res) => {
      setMailTopTypeOptions(res as MailTopTypeOptionType[] || [])
    })
    electronStore.get('mailSecondTypeOptions').then((res) => {
      setMailSecondTypeOptions(res as MailSecondTypeOptionType[] || [])
    })
    electronStore.get('JSYCookie').then((res) => {
      setJSYCookie(res as string || '')
    })
    electronStore.get('mailTemplates').then((res) => {
      setMailTemplates(res as MailTemplateType[] || [])
    })
  }, [])

  return <div className={'main-page'}>
    <SideBar currentAppRouteKey='ade' menuList={menuList} />
    <div className={'content'}>
      <Outlet />
    </div>
  </div>
}

export default MainPage
